<template>
  <view>
    <view class="row" @click="open">
      <view class="row-content">
        <text v-if="!label && placeholder" class="row-placeholder">{{ placeholder }}</text>
        <text v-if="label">{{ label }}</text>
      </view>
      <uni-icons type="forward" size="18" color="#999"></uni-icons>
    </view>
    <uni-popup ref="popup" type="bottom" class="popup" @maskClick="onClose">
      <view class="popup-content">
        <view class="picker-header">
          <view @click="onClose">取消</view>
          <view v-if="title" class="packer-title">{{ title }}</view>
          <view @click="onConfirm">确定</view>
        </view>
        <picker-view :value="index" @change="onChange" class="picker">
          <picker-view-column>
            <view class="picker-row" v-for="item in options" :key="item.value">
              {{ item.label }}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
import { getRollbackNodes } from '@/api/duty-basic/duty-meeting'
export default {
  model: {
    prop: 'value',
    event: 'update:value',
  },
  props: {
    placeholder: String,
    value: [String, Number],
    title:String,
    taskId:[String, Number]
  },
  data() {
    return {
      index:[0],
      options: [],
    }
  },
  methods: {
    // 打开
    open() {
      this.$refs.popup.open()
    },
    onClose(){
      this.index = [this.options.findIndex(item => item.value == this.value) || 0]
      this.$refs.popup.close()
    },
    onConfirm(){
      this.$emit('update:value',this.options[this.index[0]].value)
      this.$refs.popup.close()
    },
    onChange(e){
      this.index = e.detail.value
    },
    async getRollbackNodes(){
      if(!this.taskId) return
      const {data = []} = await getRollbackNodes(this.taskId)
      this.options = data.map(item=>({value:item.nodeId,label:item.nodeName}))
    }
  },
  computed: {
    label() {
      return this.options.find(item => item.value == this.value)?.label || ''
    },
  },
  
  mounted(){
    this.getRollbackNodes()
  },
  watch:{
    taskId(newVal,oldVal){
      if(newVal == oldVal) return
      this.$emit('update:value',undefined)
      this.getRollbackNodes()
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .bottom {
  margin-bottom: 0 !important;
}
.row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  width: 100%;
  padding: 30rpx 0;
  box-sizing: border-box;
  .row-content {
    flex: 1;
    text-align: right;
    word-wrap:break-word;
    display: inline-block;
    width: 200rpx;
    overflow: hidden;
  }

  .row-placeholder {
    color: #bbbbbb;
  }
 
}

.popup-content {
  background: #fff;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 20rpx;
  padding: 20rpx 0;
}

.picker {
  height: 490rpx;
}

.picker-row {
  text-align: center;
  line-height: 70rpx;
  text-overflow: ellipsis;
}

.packer-title
{
  font-size: 30rpx;
}
</style>
